<template>
  <el-dialog title="职位添加" :visible.sync="dialogFormVisible">
    <el-form ref="position-add-form" :model="form" :rules="rules">
      <el-form-item label="公司LOGO" :label-width="formLabelWidth" prop="companyLogo">
        <Upload 
          ref="upload" 
          :uploded-succ.sync="uploadSucc"
          :is-change.sync="isUploadFile"
        ></Upload>
      </el-form-item>
      <el-form-item label="公司名称" :label-width="formLabelWidth" prop="companyName">
        <el-input v-model="form.companyName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="职位名称" :label-width="formLabelWidth" prop="positionName">
        <el-input v-model="form.positionName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所在城市" :label-width="formLabelWidth" prop="city">
        <el-input v-model="form.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="岗位薪资" :label-width="formLabelWidth" prop="salary">
        <el-input v-model="form.salary" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Upload from './Upload'
import { add } from '@/api/positions'
export default {
  components: {
    Upload
  },
  
  data() {
    // let validateCompanyLogo = (rule, value, callback) => {
    //   if (!this.isUploadFile) {
    //     callback(new Error('请选择文件'));
    //   } else {
    //     callback()
    //   }
    // }

    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      isUploadFile: false,
      uploadSucc: null,

      form: {
        companyName: '',
        positionName: '',
        city: '',
        salary: ''
      },

      rules: {
        // companyLogo: [
        //   { validator: validateCompanyLogo, message: '请选择文件', trigger: 'blur'}
        // ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        positionName: [
          { required: true, message: '请输入职位名称', trigger: 'blur' },
        ],
        city: [
          { required: true, message: '请输入入职城市', trigger: 'blur' },
        ],
        salary: [
          { required: true, message: '请输入职位薪资', trigger: 'blur' },
        ],
      }
    }
  },

  methods: {
    handleCancel() {
      this.dialogFormVisible = false
    },

    handleSubmit() {
      if (!this.isUploadFile) {
        this.$message('请选择文件');
      } else {
        this.$refs['upload'].submitUpload()
      }
    },

    submitForm({file}) {
      this.$refs['position-add-form'].validate(async (valid) => {
        if (valid) {
          let result = await add({
            ...this.form,
            companyLogo: file
          })

          this.$refs['position-add-form'].resetFields()
          this.$refs['upload'].fileList = []
          this.$parent.loadData()
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  },

  watch: {
    uploadSucc(msg) {
      // step2: 表单提交
      if (msg.ret) {
        this.submitForm(msg.data)
      } else {
        console.log(msg.data.message)
      }
    }
  }
}


</script>

<style lang='stylus' scoped>

</style>